<template>
  <div class="Personnel">
    <div class="returnBtn" @click="returnPrevious">返回上级</div>
    <div class="person-content">
      <div @click="toPersonInfo(item.eid)" class="person-box" v-for="(item,index) in personInfo" :key="index" :style="randomRgb()">{{item.ename}}</div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
  export {mapState} from 'vuex'
  export default {
    name: 'Personnel',
    data () {
      return {
        personInfo: []
      }
    },
    computed: {
      ...mapState('Information',['DName','isTrue']),
      DName:{
        get(){
          return this.$store.state.Information.DName
        },
        set(val){
          return this.$store.state.Information.DName = val
        }
      },
      isTrue:{
        get(){
          return this.$store.state.Information.isTrue
        },
        set(val){
          return this.$store.state.Information.isTrue = val
        }
      }
    },
    mounted () {
      this.getInfo()
    },
    methods: {
      getInfo(){
        if(!this.isTrue){
          this.DName = this.$route.params.DName;
        }else if(this.isTrue){
          this.isTrue = false
        }
        // 在此发起axios请求，将d_name传给服务器，并将返回的数据存入personList
        this.$axios({
          url:`http://132.232.110.185/personnelManagement/department/showDepartmentBydName/${this.DName}`,
          method:'GET'
        }).then(
          response => {
            // console.log(response.data.data);
            this.personInfo = response.data.data
          },
          error => {
            console.log('部门员工获取失败');
            console.log(error);
          }
        )
      },
      randomRgb() {
        let R = Math.floor(Math.random() * 130+110);
        let G = Math.floor(Math.random() * 130+110);
        let B = Math.floor(Math.random() * 130+110);
        return {
          background: 'rgb(' + R + ',' + G + ',' + B + ')'
          };
      },
      returnPrevious(){
        this.$router.back()
      },
      toPersonInfo(eid){
        // console.log(eid);
        this.$router.push({
          name: 'PersonInfo',
          params: {
            eid
          }
        })
      }
    }
  }
</script>

<style scoped>
  .Personnel{
    width: 92%;
    margin: auto;
    padding-bottom: 50px;
  }
  .returnBtn{
    cursor: pointer;
    padding-top: 20px;
    width: 100px;
    height: 60px;
    line-height: 60px;
    font-weight: 700;
    color: red;
  }
  .person-content{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .person-box{
    margin-top: 20px;
    width: 180px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    color: white;
    border-radius: 5px;
  }
</style>